/** This file list all CSS classes used by Episerver Forms.

    Class names are structured and named in BEM methodology (Block, Element, Modifier) so you can easily see the overview.
        - CSS classes and their structure defined here are used by Form Core JavaScript heavily.
        - Please keep the structure (parent-child block-element relation) and default class names as is.

    This file is intended to be re-styled by 3rd developers. or in their site template (E.g.: AlloyMVC).
        - Default styling contain only minimal styling-rule for Episerver Forms and its build-in elements.
        - Default styling is applied for both Forms rendering in ViewMode and authoring in EditView.
        - Styling rules can be modified freely.
*/
.EPiServerForms {
    @active-color: rgba(41,128,189,0.5);    /*predefined color for selected item, elapsed progress*/
    @invisibleelement-color: rgba(184, 192, 197, 0.6);  /*to indicate FormStep, FormHidden in EditView*/
    @border-radius: 4px;
    @warning-foreground-color: red;
    @warning-background-color: #fff8aa;

    // http://ux.episerver.com/#colors
    @primary1: #84c8e4;
    @text-color: #333;
    .Form__Title {}
    .Form__Description {
        margin-bottom: 1rem;
    }
    .FormImageSubmitButton{
        width:100%;
        height:100%;
        padding:0;
        border:0;
        background:none;
        box-shadow:none;
    }
    .Form__Status {
        .Form__Status__Message {
            display: block;
            padding: 1rem;
            margin: 1rem 0;
        }

        .Form__Success__Message{
            background-color: @primary1;
            color: @text-color;
        }

        .Form__Warning__Message {
            background-color: @warning-background-color;
            color: @warning-foreground-color;
        }

        .Form__Readonly__Message{
            display: block;
            padding: 1rem;
            margin: 1rem 0;
            background-color: @warning-background-color;
            color: @warning-foreground-color;
        }
    }
    .Form__MainBody {}

    // for next or previous navigation between steps
    .Form__NavigationBar {
        .Form__NavigationBar__Action {
            display: inline-block;
            padding: inherit;
            vertical-align: middle;
            text-align: center;
            border: 1px solid @active-color;
            border-radius: @border-radius;
            font-size: inherit;
            height: 2em;
            width: 10em;
            max-width: 10rem;
            color: initial;

            background-image: linear-gradient(top,#fff,#e6e6e6);
            background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
            background-image: -ms-linear-gradient(top,#fff,#e6e6e6);
            background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);

            &:disabled {
                color: GrayText;
            }
        }

        .Form__NavigationBar__ProgressBar {
            display: inline-block;
            border: 1px solid @active-color;
            vertical-align: middle;
            width: 40%;

            .Form__NavigationBar__ProgressBar--Progress {
                /*display: none;*/ /*turn on this style to hide visual progress bar*/
                background-color: @active-color;
                width: 0%; /* Will be adjusted by JavaScript */
                height: 1rem;
            }

            .Form__NavigationBar__ProgressBar--Text {
                display: none; /*turn off this style to show text "Page 1/4" of progress bar*/
                .Form__NavigationBar__ProgressBar__ProgressLabel {}
                .Form__NavigationBar__ProgressBar__CurrentStep {}
                .Form__NavigationBar__ProgressBar__StepsCount {}
            }
        }
    }

    .FormStep {
        .FormStep__Title{}
        .FormStep__Description{
            margin-bottom: 1rem;
        }
    }

    // All Form's Element need to be tag with this class at root DOM node. Form__Element wraps every-DOM-nodes of current form element.
    // For simple element like Textbox, it can be the input
    // For complex element like Selection, Captcha, it contains the Label and input controls for taking value from Visitor
    .Form__Element {
        margin: 0 0 1.5rem 0;

        // change style of Form__Element in the Preview viewport in EditView (it affects both Editting mode and Preview mode)
        .preview & {}

        // label for element
        .Form__Element__Caption {
            display: inline-block;
            min-width: 15%;
            vertical-align: top;
        }

        // validation error message for each Element
        .Form__Element__ValidationError {
            color: @warning-foreground-color;
            display: block;
            word-wrap: break-word;
        }
        // SEMANTIC
        // for marking non-data element (like FormStep, ParagraphText, ...)
        .Form__Element--NonData {}
        // Element has this class will not be bound with saved Data in LocalStorage
        .FormExcludeDataRebind {}
    }

    

    /************* UTILITY CLASSES ***********/
    // Use serverside or clientside logic to add/remove this class to show/Hide element
    .hide {
        display: none;
    }




    /************* BUILDIN ELEMENTS ***********/
    /******************************************/
    .FormSubmitButton {}
    .FormResetButton {}

    .FormTextbox {
        .FormTextbox__Input{}
    }
    .FormTextbox--Textarea {
        .FormTextbox__Input{}
    }
    .FormTextbox--Number {
        .FormTextbox__Input{}
    }

    .FormHidden {}
    .FormFileUpload {}

    .FormCaptcha {
        .FormTextbox__Input {
            width: 8rem;
        }
        .FormCaptcha__Image {}
        .FormCaptcha__Refresh {
            font-size: 1em;
            width: auto;
            height: auto;
        }
    }

    .FormSelection {}
    .FormChoice {
        .FormChoice__Input {}
        .FormChoice__Input--Checkbox {}        
        .FormChoice__Input--Radio {}
    }

    .FormChoice--Image {
        // hide the input (checkbox or radio) next to the image
        .hidden {
            visibility: hidden;
        }
        .FormChoice--Image__Item {
            /* for image choice items, display as a flow (inline-block), we want max 2 items in one row, with a small margin */
            display: inline-block;
            max-width: 40%;
            text-align: center; /* image caption will be center */
            margin: 0.5rem;

            .FormChoice--Image__Item__Caption {}
        }
        /*img stand next to checked image will be bordered*/
        .FormChoice__Input:checked ~ img {
            border: 1px solid @active-color;
        }
    }
    
    // Range element
    .FormRange {
        // range input type element
        .FormRange__Input {
            max-width: 60%;
            display: inline;
        }

        // min, max label elements
        .FormRange__Min {}
        .FormRange__Max {}
    }

    /*************** EDIT VIEW ****************/
    /******************************************/
    // Form__Element which is invisible in ViewMode will have this CSS class in EditView (E.g.: FormStep and FormHidden should have this class)
    .EditView__InvisibleElement {

        &.FormStep{
            display: block;
            border-radius: @border-radius;
            border-color: @invisibleelement-color;
            background-color: @invisibleelement-color;
            color: #000;
            padding: 0.2rem;
            font-family: Verdana;
            box-shadow: 3px 3px 5px #ccc;
            /*text-align: center;*/
            
            .FormStep__Warning{
                .Warning;
            }            
        }

        &.FormHidden {
            display: inline-block;
            border-radius: @border-radius;
            border: 1.5px outset @invisibleelement-color;
            padding: 0.2rem 1rem;
            min-width: 18rem;
            /*text-align: center;*/
        }
    }

    .Warning{
        color: @warning-foreground-color;
        background-color: @warning-background-color;
        display: block;
        word-wrap: break-word;
    }

    .Form__Warning{
        .Warning;
    }
}
